<template>
  <div class="page">
    <div class="title">Token添加</div>
    <div class="token-add">
      <el-form label-width="80px">
        <el-form-item label="活动名称">
          <el-radio-group v-model="tokenType">
            <el-radio :label="1">永久</el-radio>
            <el-radio :label="2">3个月</el-radio>
            <el-radio :label="3">1年</el-radio>
            <el-radio :label="4">3年</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- <el-form-item label="备注">
          <el-input></el-input>
        </el-form-item> -->
        <el-form-item label="">
          <el-button type="primary" @click="saveToken">添加</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="title">
      Token列表
      <span class="tips"><i class="el-icon-warning icon"></i>最多只能添加三个token</span>
    </div>
    <div class="table-wrap">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="token" label="Token" width="550"> </el-table-column>
        <el-table-column prop="expire" label="过期时间" width="180">
          <template slot-scope="scope">
            {{ scope.row.tokenType === 1 ? '永久' : scope.row.expire }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button type="text" @click="copyToken(scope.row)">复制</el-button>
            <el-button type="text" @click="delToken(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { getTokenList, delToken, saveToken } from '@/api/token';
export default {
  data() {
    return {
      tokenType: 1,
      tableData: [],
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      let res = await getTokenList();
      this.tableData = res.list;
    },
    async saveToken() {
      await saveToken({
        tokenType: this.tokenType,
      });
      this.getList();
      //   console.log('res', res);
      //   if (res.code !== 200) {
      //     this.$message({
      //       message: res.message,
      //       type: 'error',
      //     });
      //   } else {
      //     this.$message({
      //       message: '添加成功',
      //       type: 'success',
      //     });

      //   }
    },
    copyToken(item) {
      let res = this.clipboardCopyText(item.token);
      if (res) {
        this.$message({
          message: '复制成功',
          type: 'success',
        });
      } else {
        this.$message({
          message: '复制失败',
          type: 'error',
        });
      }
      // .then(() => {
      //   this.$message({
      //     message: '复制成功',
      //     type: 'success',
      //   });
      // })
      // .catch((err) => {
      //   console.log('复制失败了');
      //   this.$message({
      //     message: '复制失败',
      //     type: 'error',
      //   });
      // });
    },
    /**
     * 将文字写入剪切板
     * @param {string} text
     * @returns {Promise} 返回promise对象
     */
    clipboardCopyText(text) {
      try {
        const t = document.createElement('textarea');
        t.nodeValue = text;
        t.value = text;
        document.body.appendChild(t);
        t.select();
        document.execCommand('copy');
        document.body.removeChild(t);
        return true;
      } catch (e) {
        console.log(e);
        return false;
      }
    },
    async delToken(item) {
      this.$confirm('确定删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async () => {
        await delToken({
          id: item.id,
          token: item.token,
          expire: item.expire,
        });
        this.getList();
        // console.log('res', res);
        // if (res.code !== 200) {
        //   this.$message({
        //     message: res.message,
        //     type: 'error',
        //   });
        // } else {
        //   this.$message({
        //     message: '添加成功',
        //     type: 'success',
        //   });
        //   this.getList();
        // }
      });
    },
  },
};
</script>
<style scoped lang="scss">
.page {
  min-height: 90vh;
  background: #fff;
  padding: 40px 30px;
  .title {
    font-size: 25px;
    font-weight: 500;
    .tips {
      font-size: 12px;
      color: #999;
      margin-left: 5px;
      .icon {
        margin-right: 5px;
      }
    }
  }
  .token-add {
    width: 600px;
    margin: 20px 0;
  }
  .table-wrap {
    width: 915px;
  }
}
</style>
